<template>
  <div class="binding-page">
    <div class="setting-page-right-title">
      <div class="setting-right-name">
        <div class="setting-top-name">绑定账号</div>
        <div class="setting-bottom-line"></div>
      </div>
    </div>
    <div class="binding-content">
      <el-form label-width="120px" label-position="right">
        <el-form-item label="当前绑定手机号">
          <span class="text-phone">{{phone}}</span>
        </el-form-item>
        <el-form-item label="更改绑定手机号">
          <el-input class="theme-input" placeholder="请输入手机号" v-model="params.phone">
            <img slot="prefix" src="../../assets/img/register/phone.png" height="34px">
          </el-input>
        </el-form-item>
        <el-form-item label="图形验证码">
          <el-row>
            <el-col :span="12">
              <el-input
                placeholder="请输入图形验证码"
                class="theme-input-canvas"
                v-model="imgCode"
                style="width: 179px;height: 100%;"
              >
                <img slot="prefix" src="../../assets/img/register/anquan.png" height="30px">
              </el-input>
            </el-col>
            <el-col :span="8">
              <div class="identify">
                <s-identify
                  :identifyCode="identifyCode"
                  :contentWidth="contentWidth"
                  :contentHeight="contentHeight"
                ></s-identify>
              </div>
            </el-col>
            <el-col :span="4" style="margin:-10px 0 0 0">
              <el-button class="img-text-button" type="text" @click="refreshCode">
                看不清
                <br>换一张
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="短信验证码">
          <el-input class="theme-input" placeholder="请输入短信验证码" v-model="params.yards">
            <img slot="prefix" src="../../assets/img/register/123.png" height="30px">
            <el-button
              :disabled="codeLeftTime!=60"
              type="text"
              slot="suffix"
              class="text-button-blue"
              @click="sendSmsPassword"
            >
              发送验证码
              <span v-if="codeLeftTime!=60">({{codeLeftTime}})</span>
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="submit-button" @click="submit">确认更改手机号</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import SIdentify from '../register/picVerfication'
import validate from '../../assets/utils/validate.js'
import { empty } from 'rxjs'
export default {
  data() {
    return {
      contentWidth: 90,
      contentHeight: 40,
      code: '',
      imgCode: '',
      identifyCode: '',
      identifyCodes: '1234567890',
      codeLeftTime: 60, //获取验证码间隔
      TalentInfo: {},
      params: {
        phone: '',
        yards: ''
      },
      phone: '',
      imgCode: '',
      identifyCode: '',
      identifyCodes: '1234567890'
    }
  },
  methods: {
    empty() {
      this.params.phone = ''
      this.params.yards = ''
      this.imgCode = ''
    },
    init() {
      let left_time = localStorage.getItem(localSaved.forgetTime)
      if (left_time > 0 && left_time != 60) {
        this.codeLeftTime = left_time
        clearInterval(this.settime)
        this.setCodeTime()
      }
    },
    /**
     * @name 设置验证码延时
     */
    setCodeTime() {
      this.settime = setInterval(() => {
        this.codeLeftTime--
        localStorage.setItem(localSaved.forgetTime, this.codeLeftTime)
        if (this.codeLeftTime == 0) {
          clearInterval(this.settime)
          this.codeLeftTime = 60
          localStorage.setItem(localSaved.forgetTime, this.codeLeftTime)
        }
      }, 1000)
    },
    getData() {
      _g.apiPost('/talent/selectTalentInfo.do', this.params).then(res => {
        this.TalentInfo = res.data.resumeTalent ? res.data.resumeTalent : {}
        this.phone = _g.encryptTel(this.TalentInfo.phone)
      })
    },

    check() {
      if (this.params.phone == '' || !validate.isPhone(this.params.phone)) {
        _g.message('请输入正确手机号', 'warning')
        return false
      }
      if (this.identifyCode != this.imgCode) {
        _g.message('图片验证码不正确', 'warning')
        return false
      }
      return true
    },
    checkPhone() {
      _g.apiPost('/talent/validatePhone.do', {
        phone: this.params.phone
      }).then(res => {
        _g.toMessage(res)
        if (res.status == 0) {
          return true
        } else {
          return false
        }
      })
    },
    submit() {
      //确认更改手机号
      if (!this.check()) return false

      //验证短信验证码是否一致
      let params = {
        phone: this.params.phone,
        yards: this.params.yards
      }
      _g.apiPost('/login/checkSMS.do', params).then(res => {
        _g.toMessage({
          status: res.status,
          msg: res.status == 0 ? this.updateTalentPhone() : '短信验证码错误'
        })
      })
    },
    //更改用户绑定的手机号
    updateTalentPhone() {
      _g.apiPost('/talent/updateTalentPhone.do', this.params).then(res => {
        _g.toMessage(res)
        this.phone = _g.encryptTel(this.params.phone)
        this.empty()
      })
    },
    //发送手机短信验证码
    sendSmsPassword() {
      this.params.sms = ''

      if (!this.check()) return false
      _g.apiPost('/talent/validatePhone.do', {
        phone: this.params.phone
      }).then(res => {
        if (res.status == 0) {
          _g.apiPost('/login/sendSmsPassword.do', {
            phone: this.params.phone
          }).then(res => {
            _g.toMessage(res)
            if (res.status == 0) {
              this.setCodeTime()
            }
          })
        } else {
          _g.toMessage(res)
        }
      })
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      //console.log('换图片')
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
    }
  },
  created() {
    this.makeCode()
    this.init()
  },
  mounted() {
    this.getData()
    // 验证码初始化
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  components: { SIdentify }
}
</script>

<style lang="scss" scoped>
</style>
